<template>
	<view style="height: 500rpx;filter: grayscale(70%);">
		<view class="goods-top">
			<view class="goods-top-left">
				经典菜单
			</view>
		</view>
		<view class="menu">
			<view style="height: 100rpx;">
				<scroll-view :scroll-top="80" scroll-y="true" class="goods-menu" @scrolltoupper="upper"
					@scrolltolower="lower" @scroll="scroll" show-scrollbar="true">
					<view class="menu-name" v-for="(item,index) in menuGoodsData" :key="item.id">{{item.name}}</view>
				</scroll-view>
			</view>
			<view>
				<scroll-view scroll-y="true" class="menu-goods">
					<view v-for="(menu,index) in menuGoodsData" :key="menu.id">
						<view v-if="menu.goods.length>0">{{menu.name}}</view>
						<view class="goods-name" @tap="toGoodsInfo" v-for="(item,index) in menu.goods" :key="item.id">
							<view class="good-box-img">
								<image src="/static/goods/bz.webp" class="good-img"></image>
							</view>
							<view class="goods-name-right">
								<view class="goods-title">{{item.title}}</view>
								<view class="goods-desc">{{item.subTitle}}</view>
								<view class="goods-name-bottom">
									<view class="good-price">18元</view>
									<view class="spec" v-show="item.singleSpecFlag!='1'">选规格</view>
									<view class="spec"  v-show="item.singleSpecFlag=='1'">+</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>

			</view>
		</view>


	</view>

</template>

<script>
	export default {
		data() {
			return {
				menuGoodsData: []
			};
		},
		onLoad() {
			this.getMenuGoodsData();
		},
		methods: {

			getMenuGoodsData: function() {
				console.log("获取数据")
				uni.request({
					url: 'http://127.0.0.1:8088/tea-api/goods/getMenuGoodsList',
					method: "GET",
					success: (res) => {
						console.log('res=' + res.data);
						console.log('code=' + res.data.code);
						if (200 == res.data.code) {
							this.menuGoodsData = res.data.data;
						}

					}
				});
			},
			upper: function(e) {
				console.log(e)
			},
			lower: function(e) {
				console.log(e)
			},
			scroll: function(e) {
				console.log(e)
				// this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				// 解决view层不同步的问题
				// this.scrollTop = this.old.scrollTop
				// this.$nextTick(function() {
				// 	this.scrollTop = 0
				// });
				// uni.showToast({
				// 	icon: "none",
				// 	title: "纵向滚动 scrollTop 值已被修改为 0"
				// })
			},
			toGoodsInfo: function() {
				uni.navigateTo({
					url: "/pages/goodInfo/goodInfo"
				});

			}
		}
	}
</script>

<style lang="scss">
	.goods-top {
		height: 80rpx;

		.goods-top-left {
			width: 30%;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.menu {
		display: flex;
	}

	.goods-menu {
		width: 250rpx;
		height: 1000rpx;

		.menu-name {
			height: 120rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.menu-goods {
		width: 500rpx;
		height: 1000rpx;

		.goods-name {
			height: 200rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-width: 0 0 2rpx 0;
			border-style: solid;
			border-color: black;

			.good-box-img {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 150rpx;
				height: 150rpx;

				.good-img {
					width: 100rpx;
					height: 100rpx;
					text-align: center;
				}
			}


			.goods-name-right {
				width: 350rpx;
				height: 200rpx;
				justify-content: center;
				align-content: space-around;
				align-items: center;

				.goods-title {
					display: flex;
					align-items: center;
					margin-left: 30rpx;
				}

				.goods-desc {
					display: flex;
					align-items: center;
					margin-left: 30rpx;
				}

				.goods-name-bottom {
					display: flex;
					align-items: center;
					justify-content: space-around;
					height: 50rpx;
					margin-top: 50rpx;
				}
			}

		}

	}
</style>
